<template>
	<view class="container">
		<view class="title">
			{{props.title}}
		</view>
		<view class="right">
			<view class="content">
				{{props.content}}
			</view>
			<image style="width: 40rpx;height: 40rpx;" src="../../../static/feed/right.png"></image>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive,defineProps} from "vue"
	interface Props {  
	  title: string; 
	  content:string;
	}  
	  
	const props = defineProps<Props>();
</script>

<style lang="scss">
	.container{
		width: 100%;
		height: 120rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		display: flex;
		margin-bottom: 10rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		
		&:active{
			background-color: #efefef;
		}
		
		.title{
			font-size: 30rpx;
			font-weight: 600;
			letter-spacing: 0.1em;
		}
		
		.right{
			display: flex;
			width: 50%;
			align-items: center;
			justify-content: flex-end;
			
			.content{
				overflow: hidden;
				text-overflow: ellipsis;
				color:#8e8d93;
				margin-right: 10rpx;
			}
		}
	}
</style>
